<ng-select
  [ngModel]="selectedOption()"
  (ngModelChange)="onChange($event)"
  [disabled]="disabled"
  [placeholder]="placeholder()"
  [items]="items()"
  (blur)="onBlur()"
  [labelForId]="labelForId"
  [clearable]="false"
  (close)="onClose()"
  appendTo="body"
  [keyDownFn]="onKeyDown"
>
  <ng-template ng-option-tmp let-item="item">
    <div class="tw-flex" [title]="item.label">
      <div class="tw-me-2 tw-flex-initial">
        @if (item.icon != null) {
          <i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
        }
      </div>
      <div class="tw-flex-1 tw-text-ellipsis tw-overflow-hidden">
        {{ item.label }}
      </div>
    </div>
  </ng-template>
</ng-select>
